/** 画布存储
 * @ 标  识: hchhIOT
 * @ 作  者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
 */
/* ================================================================================================ */
//                                ★ 引入
/* ================================================================================================ */
import { defineStore } from "pinia"

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 存储
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
export const useCanvasStore = defineStore({
  id: "useCanvasStore",
  /* ================================================================================================ */
  //                               ★ state
  /* ================================================================================================ */
  state: (): any => {
    return {
      /** 画布宽度 */
      canvasWidth: 1024,
      /** 画布高度 */
      canvasHeight: 1024,
      /** 路径id选项 */
      pathIdOpt: [],
      /** 动画参数状态 */
      animateInfoState: false,
      /** 动画参数状态-动画键 */
      animatKey: '',
      /** 事件参数状态-事件键 */
      eventKey: '',
      /** 选择的图元键 */
      selectKeys: [],
      /** 父动画值选项 */
      parentAnValOpt: [],

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 图元
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 选择图元*/
      selectedPel: {},
      /** 复制图元 */
      copyPel: {},

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 页面
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 画布属性 */
      canvasAttr: {
        // 🦢 页面
        /** 页面名称 */
        pageName: "页面0",
        /** 页面键 */
        pageKey: "page1",
        /** 页面尺寸 */
        pageSize: "svg_icon",
        /** 页面方向 */
        pageOrientation: "PageHorizontal",
        /** 页面精度 */
        pageAccuracy: "0级",
        /** 页面单位 */
        pageUnit: "px",

        // 🦢 画布
        /** 画布缩放 */
        canvasScale: 1,
        /** 画布背景色 */
        canvasBackColor: "rgba(0,0,0,1)",
        /** 画布宽度 */
        canvasWidth: 1024,
        /** 画布高度 */
        canvasHeight: 1024,
        // 🦢 格栅
        /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
        gridModel: 1,
        /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
        gridStyle: 1,
        /** 格栅间距 */
        gridSpace: 10,
        /** 宽等分数 */
        gridBisectionWidthCont: 10,
        /** 宽等分数 */
        gridBisectionHeightCont: 10,
        /** 格栅点颜色 */
        gridDotColor: "rgba(255,255,255,1)",
        /** 小格颜色 */
        gridColorMini: "rgb(50,50,50)",
        /** 大格颜色 */
        gridColorMax: "rgb(100,100,100)",
        /** 格栅宽度 */
        gridWidth: 10,
        /** 格栅高度 */
        gridHeight: 10,

        // 🦢 光标
        /** 显示光标 */
        isShowCursor: false,
        /** 光标颜色 */
        cursorColor: "rgb(214,214,214)",
        /** 光标盒子尺寸 */
        cursorBoxSize: 30,
        /** 光标长度 */
        cursorLang: 1600,
        /** 光标线宽度 */
        cursorLineWidth: 1,

        // 🦢 捕捉
        /** 捕捉状态 */
        isCatch: true,
        /** 捕捉距离 */
        catchRange: 1,
        /** 捕捉到 上左 */
        catchUpLeft: false,
        /** 捕捉到 上 */
        catchUp: false,
        /** 捕捉到 上右 */
        catchUpRight: false,
        /** 捕捉到 左 */
        catchLeft: false,
        /** 捕捉到 中 */
        catchMidle: false,
        /** 捕捉到 右 */
        catchRight: false,
        /** 捕捉到 下右 */
        catchDownRight: false,
        /** 捕捉到 下 */
        catchDown: false,
        /** 捕捉到 下左 */
        catchDownLeft: false,

        // 🦢 标尺
        ruleLineColor: 'rgba(0,0,255,1)'
      },
      /** 复制页面参数 */
      copyPageInfo: {},
      /** 复制页面参数 */
      copyCanvasInfo: {},

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 笔筒
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 笔筒 */
      penContainer: [
        {
          "label": "自定义_笔筒",
          "key": "CustomPenContainer",
          "type": "PenGroup",
          "children": [
            {
              "label": "笔筒-笔_1",
              "key": "Pen29f439f0c1bb11eda2c451b65af63e3e",
              "stroke": "rgb(0,0,225)",
              "stroke_width": 5,
              "stroke_dasharray": "0",
              "stroke_dashoffset": 0,
              "stroke_linecap": "round",
              "fill": "rgba(255, 255, 255, 0)",
              "opacity": 1,
              "fill_opacity": 1,
              "stroke_opacity": 1,
              "fx": 0,
              "fy": 0
            },
            {
              "label": "笔_2",
              "key": "Penbe4258b0c1f911eda1d871239613c43f",
              "stroke": "rgb(255, 0, 0)",
              "stroke_width": 5,
              "stroke_dasharray": "",
              "stroke_dashoffset": 0,
              "stroke_linecap": "round",
              "fill": "rgba(255, 255, 255, 0)",
              "opacity": 1,
              "fill_opacity": 1,
              "stroke_opacity": 1,
              "fx": 0,
              "fy": 0
            },
            {
              "label": "笔_3",
              "key": "Penc5c1e6f0c1f911eda1d871239613c43f",
              "stroke": "rgb(0, 255, 0)",
              "stroke_width": 5,
              "stroke_dasharray": "20 20",
              "stroke_dashoffset": 0,
              "stroke_linecap": "square",
              "fill": "rgba(255, 255, 255, 0)",
              "opacity": 1,
              "fill_opacity": 1,
              "stroke_opacity": 1,
              "fx": 0,
              "fy": 0
            },
            {
              "label": "白红实现",
              "key": "Pena611bf60d07711edb957913012b9771c",
              "stroke": "rgb(255, 255, 255)",
              "stroke_width": 5,
              "stroke_dasharray": "",
              "stroke_dashoffset": 0,
              "stroke_linecap": "round",
              "fill": "rgb(255, 0, 255)",
              "opacity": 1,
              "fill_opacity": 1,
              "stroke_opacity": 1,
              "fx": 0,
              "fy": 0
            },
            {
              "label": "笔_1",
              "key": "Pen65555680d08611edae76ef68480487f7",
              "stroke": "rgb(255, 255, 255)",
              "stroke_width": 5,
              "stroke_dasharray": "",
              "stroke_dashoffset": 0,
              "stroke_linecap": "round",
              "fill": "rgb(0, 84, 0)",
              "opacity": 1,
              "fill_opacity": 1,
              "stroke_opacity": 1
            },
            {
              "label": "笔_1",
              "key": "Pen9a0c4970d68e11ed88f10f351e34a0e6",
              "stroke": "rgb(0, 0, 0)",
              "stroke_width": 50,
              "stroke_dasharray": "",
              "stroke_dashoffset": 0,
              "stroke_linecap": "round",
              "fill": "rgb(0, 0, 0)",
              "opacity": 1,
              "fill_opacity": 1,
              "stroke_opacity": 1
            },
            {
              "label": "笔_3",
              "key": "Pen2193c990d75c11edb376f5d127339b46",
              "stroke": "rgb(0, 255, 0)",
              "stroke_width": 5,
              "stroke_dasharray": "20 20",
              "stroke_dashoffset": 0,
              "stroke_linecap": "square",
              "fill": "rgba(255, 255, 255, 0)",
              "opacity": 1,
              "fill_opacity": 1,
              "stroke_opacity": 1,
              "fx": 0,
              "fy": 0
            }
          ]
        }
      ],
      /** 选择的笔筒 */
      selectedPenContainer: [],
      /** 选中的画笔 */
      selectedPen: {
        label: "默认画笔",
        key: "defultPen",
        stroke: "rgb(0, 0, 255)", //轮廓颜色
        stroke_width: 5, //廓厚度
        stroke_dasharray: "", //创建虚线
        stroke_dashoffset: 0, //虚线偏移
        stroke_linecap: "round", //端点的属性 圆滑
        fill: "rgba(255, 255, 255, 0)", //
        opacity: 1, //
        fill_opacity: 1, //
        stroke_opacity: 1, //
        fx: 0,
        fy: 0
      },
      /** 笔选择状态-0无-1笔筒-2笔-3已下载-4上载 */
      penSelectState: 0,
      /** 复制笔 */
      copyPen: {},

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 块组
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 块组*/
      blockGroup: [{
        "label": "默认块组", "key": "CustomBlockGroup", "type": "blockGroup", "children": [{
          key: 'CustomBlock',
          label: '默认块',
          type: 'divBlock',
          val: `<path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M266,557 L483,432 L483,183 L266,57 L50,182 L50,432z' fill='none'></path><path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M778,557 L994.5063509461097,432 L995,182 L778,57 L562,182 L562,432z' fill='none'></path><path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M512,968 L729,843 L729,593 L512,468 L296,593 L296,843z' fill='none'></path>`
        }]
      }],
      /** 选择的块组 */
      selectedBlockGroup: {
        "label": "默认块组", "key": "CustomBlockGroup", "type": "blockGroup", "children": [{
          key: 'CustomBlock',
          label: '默认块',
          type: 'divBlock',
          val: `<path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M266,557 L483,432 L483,183 L266,57 L50,182 L50,432z' fill='none'></path><path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M778,557 L994.5063509461097,432 L995,182 L778,57 L562,182 L562,432z' fill='none'></path><path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M512,968 L729,843 L729,593 L512,468 L296,593 L296,843z' fill='none'></path>`
        }]
      },
      /** 选中的 */
      selectedBlock: {
        key: 'CustomBlock',
        label: '默认块',
        type: 'divBlock',
        val: `<path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M266,557 L483,432 L483,183 L266,57 L50,182 L50,432z' fill='none'></path><path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M778,557 L994.5063509461097,432 L995,182 L778,57 L562,182 L562,432z' fill='none'></path><path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M512,968 L729,843 L729,593 L512,468 L296,593 L296,843z' fill='none'></path>`
      },
      /** 复制块 */
      copyBlock: {},

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 坐标
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 坐标 */
      coordinate: { x: 0, y: 0 },
      /** 记录点 */
      recordPoint: [],
      /** 移动坐标 */
      moveCoordinate: { x: 0, y: 0 },
      /** 移动画布记录*/
      moveCanvasRecord: [],
      /** 画布移动X */
      moveOffsetX: 0,
      /** 画布移动Y */
      moveOffsetY: 0,
      /** 卷轴偏移x */
      scrollX: 0,
      /** 卷轴偏移y */
      scrollY: 0,

      /** 工作状态:
       * 00 无;
       * 10 选择;
       * 11 点选;
       * 12 框选;
       * 13 交叉选;
       * 20 绘图;
       * 30 编辑;
       * 40 移动;
       * 50 复制;
       * 60 画布平移
       * 70 获取平移坐标
       * */
      workState: 0,
      /** 绘制图元类型 */
      drawPelType: "",
      /** 控制图标数据*/
      ctrlIconDataSet: [],

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 选择
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 选择切换 */
      selectToggle: false,
      /** 选择框 */
      selectRect: {
        /** 选择模式 0_选择未激活 1_选择激活 2_点选 3_框选 4_交叉选 */
        Model: 0,
        /** 矩形基点X */
        BasePointX: 0,
        /** 矩形基点Y */
        BasePointY: 0,
        /** 矩形颜色 */
        StrokeColor: '#00ff00',
        /** 矩形宽度 */
        RectWidth: 0,
        /** 矩形高度 */
        RectHeight: 0,
      },
      /** 选择区域*/
      selectRange: [],

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 记录
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 提示 */
      tips: "",

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 图元数据
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 选择的图元端行数据 */
      selectedPelData: [],
      /** 图元数据选项 */
      pelDataOpt: [],

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 通道数据
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 选择的通道 */
      selectedChannel: {},
      /** 通道数据选项 */
      channelsOpt: [],


      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 设备数据
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 选择的设备行数据 */
      selectedEquip: {},
      /** 设备数据读选项 */
      readEquipDataOpt: [],
      /** 设备数据写选项 */
      writeEquipDataOpt: [],

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 数据输入
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /** 最小值 */
      sliderMin: -1024,
      /** 最大值 */
      sliderMax: 1024,
      /** 步距值 */
      sliderStep: 1,
    }
  },
  /* ================================================================================================ */
  //                               ★ getters
  /* ================================================================================================ */
  getters: {
  },

  /* ================================================================================================ */
  //                               ★ actions
  /* ================================================================================================ */
  actions: {
  },
});
